<!DOCTYPE html>
<html>
<head>
    <title>玩转spring boot——websocket</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/

        var stompClient = null;

        var app = angular.module('app', []);
        app.controller('MainController', function ($rootScope, $scope, $http) {

            $scope.data = {
                //连接状态
                connected: false,
                //消息
                message: '',
                rows: []
            };

            //连接
            $scope.connect = function () {
                var socket = new SockJS('/my-websocket');
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function (frame) {
                    // 注册发送消息
                    stompClient.subscribe('/topic/send', function (msg) {
                        $scope.data.rows.push(JSON.parse(msg.body));
                        $scope.data.connected = true;
                        $scope.$apply();
                    });
                    // 注册推送时间回调
                    stompClient.subscribe('/topic/callback', function (r) {
                        $scope.data.time = '当前服务器时间：' + r.body;
                        $scope.data.connected = true;
                        $scope.$apply();
                    });
                    $scope.data.connected = true;
                    $scope.$apply();
                });
            };

            $scope.disconnect = function () {
                if (stompClient != null) {
                    stompClient.disconnect();
                }
                $scope.data.connected = false;
            };

            $scope.send = function () {
                stompClient.send("/app/send", {}, JSON.stringify({
                    'message': $scope.data.message
                }));
            }
        });
        /*]]>*/
    </script>
</head>
<body ng-app="app" ng-controller="MainController">

<h2>玩转spring boot——websocket</h2>

<label>WebSocket连接状态:</label>
<button type="button" ng-disabled="data.connected" ng-click="connect()">连接</button>
<button type="button" ng-click="disconnect()"
        ng-disabled="!data.connected">断开
</button>
<br/>
<br/>
<div ng-show="data.connected">
    <label>{{data.time}}</label> <br/> <br/> <input type="text" ng-model="data.message" placeholder="请输入内容..."/>
    <button ng-click="send()" type="button">发送</button>
    <br/> <br/> 消息列表： <br/>
    <table>
        <thead>
        <tr>
            <th>内容</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in data.rows">
            <td>{{row.message}}</td>
            <td>{{row.date}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>